<template>
	<view class="myself-view">
		<view class="myself-view-head">
			<view class="myself-view-head-avatar">
				<image :src="userInfo.avatar"></image>
			</view>
			<view class="myself-view-head-name-phone">
				<view class="myself-view-head-name">
					{{userInfo.name}}
				</view>
				<view class="myself-view-head-phone">
					{{userInfo.phone}}
				</view>
			</view>
			<view class="myself-view-head-setting">
				设置
			</view>
		</view>
		<Function />
		<AdView />
	</view>
</template>

<script>
	import Function from './Function.vue'
	import AdView from '../home/AdView.vue'
	
	export default {
		components: {
			Function,
			AdView
		},
		data() {
			return {
				userInfo: {
					avatar: '/static/logo.png',
					phone: '132xxxx3300',
					name: '天王盖地虎'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.myself-view {
		
		.myself-view-head {
			display: flex;
			
			.myself-view-head-avatar {
				padding: 10rpx;
				margin: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 70rpx;
				background: radial-gradient(circle, #eeeeee, #ffffff);
				
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}
			}
			
			.myself-view-head-name-phone {
				width: 450rpx;
				margin-top: 40rpx;
				
				.myself-view-head-name {
					
				}
				
				.myself-view-head-phone {
					margin-top: 20rpx;
				}
			}
			
			.myself-view-head-setting {
				width: 160rpx;
				padding-top: 40rpx;
				padding-right: 40rpx;
				text-align: right;
			}
		}
	}
</style>